<table class="products-head">
               <tr>
                  <td   class="one" >
                  <?= $category_title ?>
                  </td>
                  <td class="two">
                  
                  <?= $productDetails['title']?> 
                  </td>
                  <td class="three">
                  
                  </td>
               </tr>
             </table>
             <table class="products" >
               <tr>
                  <td class="products-left">
                      <ul class="products-ul">
                          <?php if (isset($series) && !empty($series)) {?>
                            <?php foreach($series as $serie):    ?>
                            	<li><a href="<?= site_url('home/productDetails/'.$serie['id'])?>"> <?=$serie['title'] ?> </a></li>
                            <?php endforeach;?>
                          <?php }?>
                          
                       </ul>
                  </td>
                  
                  <td style="vertical-align:top">


<table  class="details">
               	        <tr>
               	          <td width="200px" rowspan="3">
                          
                          <?php if (isset($images) ){
                              
                              if (!isset($a_pic_id) || is_null($a_pic_id)){
                                  reset($images);
                                  $image = current($images);
                              } else {
                                 
                                  $image=$images[$a_pic_id];
                              }
                            ?> 
                             
                          	 <img style="border: 1px solid #CFCFCF;cursor:pointer;" src="<?=galery_path_url().'/'.$productDetails['id'].'/thumbs3/'.$image['name'] ?>"
                           rel="#mies1"/> 
                           <!-- overlays -->
                            <div class="simple_overlay" id="mies1"><a class="close"></a>
                            	<img src="<?=galery_path_url().'/'.$productDetails['id'].'/'.$image['name'] ?>">
                            
                            	
                            </div>
                          <?php } else {?>
                          	<img src="<?=base_url()?>images/testImage_inside.jpg"/>
                          <?php }?>
                          
                          
                          </td>
                     	  <td class="detailsTitle"><?= $image['color']?></td>
               	       </tr>
               	        <tr>
                     	  <td class="description">
                     	  <?= $productDetails['description']?> 
                     	  </td>
                   	  </tr>
                     	
                     	<tr>
                           <td class="company">
                            <a href="<?= $productDetails['link']?>">Производител <?= $productDetails['company']?></a>    
                           </td>
                        </tr>
                        
                     </table>
                     <div style="border: 2px; height: 10px; margin: 0 auto;
 background: url(../images/left.gif) 50% no-repeat;">
                     	<hr/>
                     </div>
                    <?php if (isset($images) && !empty($images)) {?>
                      <!-- "previous page" action -->
                    <a class="prev browse left disabled"></a>
                     <!-- root element for scrollable -->
                     <div class="scrollable">
                          <!-- root element for the items -->
   						<div class="scrollable">
                          <!-- root element for the items -->
   						<div style="left: 0px;" class="items">
                    <?php foreach($images as $image):;    ?>
                  
                    
                   
                       		 <div>
                       		   <a style="color:#AD9D87;" href="<?= site_url('home/productDetails/'.$productDetails['id'].'/'.$image['pic_id'])?>"> 
         			        	 <img style="border: 1px solid #CFCFCF;" src="<?=galery_path_url().'/'.$productDetails['id'].'/thumbs/'.$image['name'] ?>"/>
         			        	 <?=$image['color']?>
         			            </a>
      					 	</div>
                          
                       		
                               					
                     	<?php endforeach;?>   					
                     	 </div>
                     </div>     					
                     	       					
                     	 
                     </div>
                     <!-- "next page" action -->
                    <a class="next browse right"></a>
                    
                 <script src="<?= base_url() ?>js/jquery.tools.min.js"></script>
                 <script>
                // execute your scripts when the DOM is ready. this is mostly a good habit
                $(function() {
                
                	// initialize scrollable
                	$(".scrollable").scrollable();
                
                });
                // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
                $(document).ready(function() {
	                $("img[rel]").overlay();
                });
                </script>
                <?php }?>
</td>
               </tr>
             </table>
             